<template>
  <IFexHeaderMain>
    <template #header>
      <IHeader>支付详情</IHeader>
    </template>
    <view class="locker-order-page">
      <!-- 顶部状态栏 -->
      <view class="top-bar"  :class="'status_' + orderInfo.status">
        <text class="status">{{ statusType[orderInfo.status] }}</text>
        <text class="time">共使用{{ orderInfo.time }}</text>
      </view>
      <view class="info-list">
        <view class="info-item" v-for="(item, index) in orderInfo.items" :key="index" :style="item.style">
          <text class="label">{{ item.label }}</text>
          <text class="value">{{ item.value }}</text>
        </view>
      </view>
      <view class="record-section">
        <text class="record-title">开门记录</text>
        <view class="record-item" v-for="(item, index) in orderInfo.records" :key="index">
          <text class="record-desc">{{ item.desc }}</text>
          <text class="record-time">{{ item.time }}</text>
        </view>
      </view>
    </view>
  </IFexHeaderMain>
</template>

<script setup lang="ts" name="index">
  import { computed, onMounted, ref } from 'vue'
  import IFexHeaderMain from '@/components/container/IFexHeaderMain.vue'
  import IHeader from '@/components/container/IHeader.vue'
  import { onLoad } from '@dcloudio/uni-app'
  import { confirmOrder, getUserStorageInfo } from '@/api'
  const payDetail = ref({ userStorageId: '' })
  const operateActionStatus: any = {
    0: '创建订单',
    1: '中途开门',
    2: '中途关门',
    3: '结束订单',
  }
  const statusType: any = {
    0: '未寄存',
    1: '正在寄存',
    2: '中途开门',
    3: '结束寄存',
    4: '取消寄存',
  }
  onLoad(async (options: any) => {
    payDetail.value.userStorageId = options.userStorageId
    // init()
  })
  const orderInfo = ref<any>({
    status: '',
    time: '',
    items: [
      { label: '寄存网点', value: '' },
      { label: '网点地址', value: '' },
      { label: '寄存柜子', value: '' },
      { label: '订单编号', value: '' },
      { label: '存包手机', value: '' },
      { label: '存包密码', value: '' },
      { label: '订单费用:', value: '0元' },
      { label: '实付金额:', value: '' },
      { label: '使用时长:', value: '' },
      { label: '开始时间:', value: '' },
      { label: '结束时间:', value: '未结束' },
      { label: '计费模式', value: '免费' },
      { label: '备注', value: '取物品,请到柜子屏幕上输入手机号和密码取物', style: { color: 'orange' } },
    ],
    records: [],
  })
  onMounted(() => {
    if (payDetail.value.userStorageId) {
      init()
    }
  })
  const init = async () => {
    const result = await getUserStorageInfo(payDetail.value.userStorageId)
    if (result) {
      orderInfo.value.items = [
        { label: '寄存网点', value: result.data.userStorage.pointName },
        { label: '网点地址', value: result.data.userStorage.pointAdd },
        { label: '寄存柜子', value: result.data.userStorage.counterName },
        { label: '订单编号', value: result.data.userStorage.orderNo },
        { label: '存包手机', value: result.data.userStorage.userPhone },
        { label: '存包密码', value: result.data.userStorage.userPassword },
        { label: '订单费用:', value: '0元' },
        { label: '实付金额:', value: result.data.userStorage.orderAmount + '元' },
        { label: '使用时长:', value: result.data.userStorage.useLong },
        { label: '开始时间:', value: result.data.userStorage.startTime },
        { label: '结束时间:', value: result.data.userStorage.endTime || '未结束' },
        { label: '计费模式', value: '免费' },
        { label: '备注', value: '取物品,请到柜子屏幕上输入手机号和密码取物', style: { color: '#F56C6C', fontWeight: '700' } },
      ]
      orderInfo.value.status = result.data.userStorage.status
      orderInfo.value.time = result.data.userStorage.useLong
      orderInfo.value.records = (result.data.logsList || []).map((item: any) => ({ time: item.operateTime, desc: operateActionStatus[item.operateAction] }))
    }
  }
</script>

<style scoped lang="scss">
  .locker-order-page {
    background-color: #f5f7fa;
  }
  .top-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #3b82f6;
    color: #fff;
    padding: 20rpx 30rpx;
    border-bottom-left-radius: 8rpx;
    border-bottom-right-radius: 8rpx;
  }
  .status {
    font-size: 32rpx;
    font-weight: bold;
  }
  .time {
    font-size: 28rpx;
  }
  .info-list {
    padding: 20rpx 20rpx 0 20rpx;
    margin-bottom: 20rpx;
    background-color: #ffffff;
  }
  .info-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20rpx 0;
    border-bottom: 2rpx solid #eee;
  }
  .label {
    color: #333;
    font-weight: 700;
    flex: 0 0 160rpx;
  }
  .value {
    flex: 1;
    text-align: right;
  }
  .remark .value {
    text-align: left;
  }
  .record-section {
    padding: 20rpx;
    background-color: #ffffff;
  }
  .record-title {
    font-size: 32rpx;
    font-weight: bold;
    margin-bottom: 20rpx;
  }
  .record-item {
    display: flex;
    justify-content: space-between;
    padding: 16rpx 0;
    border-bottom: 1rpx solid #eee;
  }
  .record-time {
    color: #666;
  }
  .record-desc {
    color: #333;
    font-weight: 700;
  }
  .status_0 {
    background-color: #3b82f6; /* 蓝色 - 未寄存 */
  }
  .status_1 {
    background-color: #10b981; /* 绿色 - 正在寄存 */
  }
  .status_2 {
    background-color: #f59e0b; /* 橙色 - 中途开门 */
  }
  .status_3 {
    background-color: #6b7280; /* 灰色 - 结束寄存 */
  }
  .status_4 {
    background-color: #6b7280; /* 红色 - 取消寄存 */
  }
</style>
